<template>
  <uni-nav-bar title="创建车队" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package">
    <view class="space-between lis">
      <view>车队名称</view>
      <input class="uni-input" placeholder="请输入车队名称" v-model="name" />
    </view>
    <view class="space-between lis">
      <view>管理员</view>
      <input class="uni-input" maxlength="10" placeholder="请输入管理员姓名" v-model="nickname" />
    </view>
    <view class="space-between lis">
      <view>手机号</view>
      <input class="uni-input" maxlength="11" type="number" placeholder="请输入管理员手机号" v-model="mobile"
        @input="onInput($event)" />
    </view>
  </view>
  <view class="but" @click="submit()">确定</view>
</template>

<script setup lang="ts">
  import { navBack } from '@/utils/navigator';
  import { ref, nextTick } from 'vue';
  import { errorToast, successToast, showLoading } from '@/utils/prompt';
  import { toPublish } from '@mqtt';
  import { getDriverID } from '@/stores/driverID';
  const driver_id = getDriverID();
  /**
   * 创建车队
   * @param {String} name  姓名
   * @param {String} nickname  用户昵称
   * @param {String} mobile  手机号码
   */
  const name = ref('')
  const nickname = ref('')
  const mobile = ref('')
  /**
   * 正则输入框内容
   */
  function onInput(evt : any) {
    const { detail } = evt;
    const rule = /[^\d]/g; //只能输入数字
    nextTick(() => {
      const value = detail.value.replace(rule, '');
      mobile.value = value;
    });
  }
  /**
   * 正则手机号码
   */
  function phoneTel() {
    const rule = /^1[3-9]\d{9}$/;
    return rule.test(mobile.value);
  }
  function submit() {
    if (!name.value) {
      errorToast('请输入车队名称');
      return
    }
    if (!nickname.value) {
      errorToast('请输入管理员姓名');
      return
    }
    if (!mobile.value) {
      errorToast('请输入管理员手机号');
      return
    } else if (!phoneTel()) {
      errorToast('请输入正确的手机号');
      return
    }
    submit_s()
  }
  /**
   * 提交创建车队信息
   * @param {String} name  姓名
   * @param {String} nickname  用户昵称
   * @param {String} mobile  手机号码
   * @param {Number} driver_id  创建人ID
   */
  function submit_s() {
    showLoading()
    const payload = {
      name: name.value,
      nickname: nickname.value,
      mobile: mobile.value,
      driver_id
    };
    toPublish(
      'driver/createFleet',
      payload,
      (obj : any) => {
        const { code, msg } = obj;
        if (code === 1) {
          successToast(msg)
          navBack()
        } else {
          errorToast(msg)
        }
      }
    );
  }
</script>

<style scoped lang="less">
  .package {
    padding: 0px 20rpx;

    input {
      text-align: right;
    }
  }

  .lis:nth-last-of-type(1) {
    border-bottom: 0px;
  }

  .lis {
    padding: 30rpx 0px;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
  }

  .but {
    width: 480rpx;
    height: 88rpx;
    background: #1B91FF;
    border-radius: 5px;
    text-align: center;
    line-height: 88rpx;
    color: #EAEFF3;
    margin: 80rpx auto 0px;
  }
</style>